<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 on FLAG</title>
<script type="text/javascript">
	
	//var c = new HTMLImageElement();
	var v = 3;
	
	function draw() {			
		//alert("YOO");
		var ws = document.getElementById("workspace");
		var context = ws.getContext("2d");

		context.fillRect(v,v,50,50);

		context.strokeStyle = "#111";
		context.stroke();
		
		v+=5;
		
		
	}
</script>

<style type="text/css">
	input {
		border-top-color: gray 5px solid;
	}
	canvas {
		border: gray 1px solid;
		border-bottom-color:  
	}
	#content {
		
		background-color: #c0c0c0;
		border:10px solid red;
		-moz-border-left-colors: #664444 #664455 #664411;
	}
</style>

</head>
<body>
	<header>
	
	</header>
	
	<div id="content" align="center">
		<p/>		
			<video src="YUIdocs.mov" width="50" height="50" >
		
			</video>
		</p>
		<p>
		
			<canvas id="workspace">	</canvas>
		
		</p>
		
		<abbr  title="hehehe">hallo</abbr>
		<input type="date" >
		<input type="search" >
		<input type="tel" >
		<a href="#" onclick="draw();">dibujar</a>	
	</div>
	<footer>
		<section>
		 <h2>hallo flag</h2>
		 <p>learning: <progress id="p" max=100><span>0</span>%</progress></p>
		 <script>
		 var newValue= 1;
		  var progressBar = document.getElementById('p');
		  function updateProgress() {
			newValue+=5;
		    progressBar.value = newValue;
		    progressBar.getElementsByTagName('span')[0].textContent = newValue;
		  }
		 </script>
		</section>
		<a href="#" onclick="updateProgress();">read flag's books</a>
	</footer>	
</body>

</html>